<template>
  <div class="bar-chart-container">
    <div ref="chartRef" class="bar-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref<HTMLElement | null>(null);

// 柱状图数据
const xAxisData = ['住宿', '美食', '购物', '娱乐', '景点','购物', '停车'];
const seriesData = [120, 200, 150, 80, 70, 110, 130];

onMounted(() => {
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartRef.value!);

  // 配置柱状图选项
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow',
      }
    },
    xAxis: {
      data:xAxisData,
      axisLine: {
        lineStyle: {
          color: '#0177d4'
        }
      },
      axisLabel: {
        color: '#000',
        fontSize: 10
      }
    },
    yAxis: {
      nameTextStyle: {
        color: '#000',
        fontSize: 16
      },
      axisLine: {
        lineStyle: {
          color: '#0177d4'
        }
      },
      axisLabel: {
        color: '#000',
        fontSize: 16
      },
      splitLine: {
        show:false,
        lineStyle: {
          color: '#0177d4'
        }
      },
    },
    series: [{
      type: 'bar',
      barWidth: 30,
      itemStyle:{

        normal:{
          color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#00b0ff'
          }, {
            offset: 0.8,
            color: '#7052f4'
          }], false),
          barBorderRadius: [10, 10, 0, 0],
        },

      },
      data: seriesData,
    }]
  }
  // 设置图表选项
  myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.bar-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;

  .bar-chart {
    width: 100%;
    height: 350px; // 柱状图高度
  }
}
</style>